<template>
    <el-card class="box-card">
        <el-form :model="form" label-width="120px">
            <el-form-item label="属性名称">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="商品类型">
                <el-select>
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类筛选样式">
                <el-radio-group>
                    <el-radio label="普通" />
                    <el-radio label="颜色" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否进行检索">
                <el-radio-group>
                    <el-radio label="不需要检索" />
                    <el-radio label="关键字检索" />
                    <el-radio label="范围检索" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品属性关联">
                <el-radio-group>
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性是否可选">
                <el-radio-group>
                    <el-radio label="唯一" />
                    <el-radio label="单选" />
                    <el-radio label="复选" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值的录入方式">
                <el-radio-group>
                    <el-radio label="手工录入" />
                    <el-radio label="从下面列表中选择" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值可选列表">
                <el-input type="" />
            </el-form-item>
            <el-form-item label="是否支持手动新增">
                <el-radio-group>
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排列顺序">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item>
                <template #default="scope">
                    <el-button text @click="open(scope.row)">提交</el-button>
                    <el-button>重置</el-button>
                </template>
            </el-form-item>

        </el-form>
    </el-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { reactive } from 'vue'
import * as api from '../../json/request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { AdminAddCategory } from '../../json/request/QmsAdminConreiller/index'
const input = ref('')
// do not use same name with ref
const form = ref({}) as Ref<AdminAddCategory>

const onSubmit = () => {

}
const open = (row: AdminAddCategory) => {
    console.log(form.value);

    ElMessageBox.confirm(
        'proxy will permanently delete the file. Continue?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.admin.AdminAddItem(form.value)
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
// let AddForms = AddForm()
(async function AddForm() {
    console.log(123);

    await api.admin.AdminNumSize({ pageNum: 1, pageSize: 100 })
})()
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 720px;
    margin: 100px auto;
}
</style>